<!--商品货源-->
<template>
    <div class="home-goods">
        <goods-sourse :cgoods="goods" @handleSearch="handleSearch" @refresh="refresh"></goods-sourse>
        <div v-show="null !== goods && goods.length > 0"
            style="width: 100%;display:flex;justify-content: center;margin-top: 30px;height: 100px;">
            <el-pagination background layout="prev, pager, next" :page-size="10" :total="total"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup>
import GoodsSourse from "@/components/GoodsSource.vue";
import { selectAllPage } from "@/api/order";
import { ref } from "vue";

const goods = ref([]);
const total = ref(0);
//搜索
const searchValue = ref('')
//初始化
const load = async () => {
    // 获取商品（订单）列表
    await selectAllPage({ keys: '', flag: 'goods', pageNum: 1, pageSize: 10 }).then((res) => {
        goods.value = res.data.data;
        total.value = res.data.total;
    });
    searchValue.value = ''
}
load()

// 分页
const handleCurrentChange = (val) => {
    // 获取商品（订单）列表
    selectAllPage({ keys: '', flag: 'goods', pageNum: val, pageSize: 10 }).then((res) => {
        goods.value = res.data.data;
    });
}

const handleSearch = (val) => {
    searchValue.value = val
    // 获取商品（订单）列表
    selectAllPage({ keys: searchValue.value, pageNum: 1, flag: 'goods' }).then((res) => {
        goods.value = res.data.data;
        total.value = res.data.total;
    });
}

//刷新
const refresh = () => {
    load()
}

</script>

<style lang="scss" scoped>
.home-goods {
    width: 1120px;
    margin: 0 auto;
    background-color: white
}
</style>